<!-- 中间 -->
<template>
    <!-- 折线图 -->
    <div id="bar2" class="echartMod w-[100%] " style="height: 100%;"></div>
</template>

<script setup lang="ts">
import { onMounted,ref } from 'vue'
import * as echarts from 'echarts'

const tabPosition = ref('left')
onMounted(() => {
    pieModEvent()
})
//折线图
var myChart1: any
function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    };
}
let data = [];
let now = new Date(1997, 9, 3);
let oneDay = 24 * 3600 * 1000;
let value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
    data.push(randomData());
}
const pieModEvent = (() => {
    myChart1 = echarts.init(document.getElementById('bar2'));
    var option = {
        title: {
            text: 'Dynamic Data & Time Axis'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                var date = new Date(params.name);
                return (
                    date.getDate() +
                    '/' +
                    (date.getMonth() + 1) +
                    '/' +
                    date.getFullYear() +
                    ' : ' +
                    params.value[1]
                );
            },
            axisPointer: {
                animation: false
            }
        },
        legend: {
            left: 'right',
            itemHeight: 8,
            itemWidth: 8,
            textStyle: {
                color: '#ffffffc4',
                fontWeight: '500'
            },
            itemGap: 30
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        color: ["#2ca9e1", "#1e50a2", "#007bbb", "#4bbbec", "#0095d9", "#a0d8ef", "#015eae", "#3e62ad", "#89c3eb",],
        series: [
            {
                name: 'Fake Data',
                type: 'line',
                showSymbol: false,
                data: data,
                smooth: true
            }
        ]
    };
    myChart1.setOption(option, true);
    //自适应屏幕
    window.addEventListener("resize", () => {
        if (myChart1) {
            myChart1.resize()
        }
    })
})
setInterval(function () {
  for (var i = 0; i < 5; i++) {
    data.shift();
    data.push(randomData());
  }
  myChart1.setOption({
    series: [
      {
        data: data
      }
    ]
  });
}, 1000);

setTimeout(() => {
    myChart1.resize()
}, 1800);
</script>
<style scoped lang="scss">
.echartMod {
    height: calc(100% - 0px);
}
</style>
